<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2018-2019 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<winery-loader *ngIf="loading || !attributeMappings; else content"></winery-loader>
<ng-template #content>
    <winery-table [columns]="columns" [data]="attributeMappings"
                  [disableButtons]="!sharedData.currentVersion.editable"
                  (addBtnClicked)="onAddButtonClicked()" (removeBtnClicked)="onRemoveButtonClicked($event)">
    </winery-table>
</ng-template>

<ng-template #addModal>
    <winery-modal-header [modalRef]="addModalRef" [title]="'Add Property Mapping'">
    </winery-modal-header>
    <winery-modal-body>
        <form>
            <div class="form-group">
                <span><b>Attribute Mapping Type</b></span>
                <br>
                <input type="radio" name="direction" id="all" (click)="propertyTypeSelected(attributeMappingType.ALL)">
                <label for="all">All</label>
                <br>
                <input type="radio" name="direction" id="selective"
                       (click)="propertyTypeSelected(attributeMappingType.SELECTIVE)">
                <label for="selective">Selective</label>
            </div>
            <hr>

            <div class="form-group">
                <label for="detectorNode" class="control-label">Detector Node</label>
                <ng-select id="detectorNode" [items]="detectorTemplates" [textField]="'name'"
                           (selected)="detectorNodeSelected($event)">
                </ng-select>
            </div>
            <div class="from-group" *ngIf="detectorProperties">
                <label for="detectorNodePropertiesDropdown" class="control-label">Detector Node Property</label>
                <ng-select id="detectorNodePropertiesDropdown" [items]="detectorProperties" [textField]="'key'"
                           [idField]="'key'"
                           (selected)="mapping.detectorProperty = $event.id">
                </ng-select>
            </div>
            <hr>

            <div class="form-group">
                <label for="refinementNode" class="control-label">Refinement Structure Node</label>
                <ng-select id="refinementNode" [items]="refinementStructureTemplates" [textField]="'name'"
                           (selected)="refinementNodeSelected($event)">
                </ng-select>
            </div>
            <div class="from-group" *ngIf="refinementProperties">
                <label for="refinementNodePropertiesDropdown" class="control-label">Refinement Node Property</label>
                <ng-select id="refinementNodePropertiesDropdown" [items]="refinementProperties" [textField]="'key'"
                           [idField]="'key'"
                           (selected)="mapping.refinementProperty = $event.id">
                </ng-select>
            </div>
        </form>
    </winery-modal-body>
    <winery-modal-footer [modalRef]="addModalRef"
                         [okButtonLabel]="'Add'"
                         [disableOkButton]="(!mapping.type || !mapping.detectorElement ||
                                            !mapping.refinementElement)"
                         (onOk)="onAddAttributeMapping()">
    </winery-modal-footer>
</ng-template>

<ng-template #removeModal>
    <winery-modal-header [modalRef]="removeModalRef" [title]="'Remove Attribute Mapping'">
    </winery-modal-header>
    <winery-modal-body>
        <p>Are you sure you want to delete <b>{{ mapping.id }}</b>?</p>
    </winery-modal-body>
    <winery-modal-footer [modalRef]="removeModalRef"
                         [okButtonLabel]="'Delete'"
                         [okButtonClass]="'btn-danger'"
                         (onOk)="onRemoveAttributeMapping()">
    </winery-modal-footer>
</ng-template>
